<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <title>机台异常看板</title>
    <link rel="stylesheet" href="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="machUnusual.css">
    <script src="../../library/jquery/jquery-1.11.3.js"></script>
    <script src="../../library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header" data-theme="a">
            <a href="../drillStatu/" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext"><</a>
            <h2>机台异常看板</h2>
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-bars ui-btn-icon-notext">切换面板</a>
        </div>
        <div data-role="main" class="ui-content" >

            <div id="monMach" class="draw"></div>
        </div>
    </div>
    <!--条件筛选页面-->
    <div data-role="page" id="pagetwo" data-display="overlay" data-position="right">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pageone" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>条件筛选</h2>
            <a href="#pageone" target="_self" class="ui-btn ui-btn-b" id="selectSub" data-rel="close" data-transition="slide" data-direction="reverse" @click="getSelect()">查询</a>
        </div>
        <div data-role="main" class="ui-content" style="font-size: 12px;">
            <ul data-role="listview" data-inset="true">
                <li>
                    <span style="font-size: 16px;margin-right:20px;">排序方式</span>
                    <span v-for="item in order_rul">
                                <input type="radio" value="{{item.id}}" name="payModal" data-role="none" v-model="getOrder">{{item.label}}
                        </span>

                </li>
                <li><a href="#pageProv">省市<span class="ui-li-count" style="z-index:100;" v-show="getProviceId.length>0">{{getProviceStr}}</span></a></a></li>
                <li><a href="#pagePoint" @click="getPoint()">点位</a></li>
                <li><a href="#pageType">时段<span class="ui-li-count" v-show="getSpikeId.length>0">{{getSpikeStr}}</span></a></li>
            </ul>
        </div>
    </div>
    <!--省市页面-->
    <div data-role="page" id="pageProv" data-display="overlay" data-position="right">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>省份</h2>
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectProv" data-rel="close" data-transition="slide" data-direction="reverse" @click="getProv()">确认</a>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-inset="true">
                <li>选择的城市：<span  class="ui-li-count" style="top:20%;" v-show="getCityLabel.length>0">{{getCityLabel}}</span></li>
                <li v-for="item in provCity">
                    <a  href="#pageCity"  style="padding:0 40px 0 0;"  @click="showCity(item.id,item.label)">
                        <input type="checkbox" name="provCheck" id="{{item.id}}" value="{{item.id}}" @click.prevent>
                        <label for="{{item.id}}" class="ui-btn-hover-d ui-btn-up-d">{{item.label}}</label>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--城市页面-->
    <div data-role="page" id="pageCity" data-display="overlay" data-position="right" class="seleRight">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pageProv" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>城市</h2>
            <a href="#pageProv" target="_self" class="ui-btn ui-btn-b" id="selectHB" data-rel="close" data-transition="slide" data-direction="reverse" @click="getselCity()">确认</a>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-inset="true">
                <li data-role="list-divider">{{proName}}</li>
                <li class="ui-li-static ui-body-inherit" v-for="city in provIdcity">
                    <span>{{city.label}}</span>
                    <input class="ui-btn-right" type="checkbox" id="{{city.id}}" value="{{city.id}}"  name="{{proName}}"  data-role="none" v-model="getCityId">

                </li>
            </ul>
        </div>
    </div>
    <!--通路页面-->
    <div data-role="page" id="pageAcce" data-display="overlay" data-position="right" class="seleRight">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>通路</h2>
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectAcce" data-rel="close" data-transition="slide" data-direction="reverse" @click="getSpike()">确认</a>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索通路" data-inset="true">
                <li v-for="item in spike">
                    <div data-role="collapsible" v-if="item.twoRoute">
                        <h6>{{item.label}}<input @click.stop class="ui-btn-right" type="checkbox" name="accCheck" value="{{item.id}}" data-role="none" v-model="getSpikeId"></h6>
                        <p id="pap">
                        <ul data-role="none">
                            <li style="list-style: none;padding-left: 20px;" v-for="li in item.twoRoute">
                                <label style="display: inline-block;" for="{{li.id}}">{{li.label}}</label>
                                <input id="{{li.id}}" name="accTwoCheck" value="{{li.id}}" type="checkbox" style="height:12px;">
                            </li>
                        </ul>
                        </p>
                    </div>
                    <div v-else>
                        {{item.label}}<input class="ui-btn-right"  type="checkbox" name="accCheck" value="{{item.id}}" data-role="none" v-model="getSpikeId">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--时段页面-->
    <div data-role="page" id="pageType" data-display="overlay" data-position="right" class="seleRight">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>时段</h2>
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectType" data-rel="close" data-transition="slide" data-direction="reverse" @click="getType()">确认</a>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-inset="true" >
                <li style="background:#e9e9e9; font-weight: bold;">选择时段</li>
                <li v-for="item in type">
                    {{item.label}}<input class="ui-btn-right" type="radio" name="typeCheck" value="{{item.id}}" data-role="none" v-model="getTypeId">
                </li>
            </ul>
        </div>
    </div>
    <!--点位页面-->
    <div data-role="page" id="pagePoint" data-display="overlay" data-position="right" class="seleRight">
        <div data-role="header" data-theme="a" data-position="fixed">
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext" data-rel="close" data-transition="slide" data-direction="reverse"><</a>
            <h2>点位</h2>
            <a href="#pagetwo" target="_self" class="ui-btn ui-btn-b" id="selectPoint" data-rel="close" data-transition="slide" data-direction="reverse">确认</a>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-filter="true" data-filter-placeholder="搜索通路" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" v-for="item in getCityPoint">
                <li data-role="list-divider" class="ui-li-divider ui-bar-inherit ui-first-child" >{{item.label}}</li>
                <li v-for="list in item.point" class="ui-li-static ui-body-inherit">
                    {{list.label}}
                    <input class="ui-btn-right" type="checkbox" name="pointCheck" value="{{list.id}}" data-role="none" v-model="getPointId">
                </li>
            </ul>
        </div>
    </div>

    <script src="../../library/Highcharts-6.0.3/highcharts.js"></script>
    <script src="../../library/Highcharts-6.0.3/modules/exporting.js"></script>
    <script src="../../library/Highcharts-6.0.3/modules/offline-exporting.js"></script>
    <script src="../../library/vue/vue.js"></script>
    <script src="../../library/vue/vue-resource.js"></script>
    <script src="../../controller/CrossStack.js"></script>
    <script src="machUnusual.js"></script>
</body>
</html>